@import "./mall-common";

body {
    .login {
        position: relative;

        .logo {
            height     : 97px;
            line-height: 97px;

            a {
                display   : inline-block;
                width     : 250px;
                height    : 50px;
                margin-top: 30px;
                text-align: center;

                &::before {
                    content        : "";
                    display        : inline-block;
                    width          : 240px;
                    height         : 50px;
                    background     : url(../images/login/default.png) center no-repeat;
                    background-size: contain;
                }
            }
        }

        .main {
            position        : absolute;
            z-index         : 2;
            top             : 129px;
            right           : 17px;
            background-color: #fff;

            .reglogin {
                position: relative;
                padding : 30px;
                width   : 400px;
                height  : 526px;
                overflow: hidden;

                .tab {
                    display : flex;
                    position: absolute;
                    top     : 20px;
                    left    : 0;
                    width   : 100%;
                    height  : 50px;

                    li {
                        width        : 50%;
                        height       : 50px;
                        line-height  : 50px;
                        border-bottom: 1px solid #e0e0e0;
                        font-size    : 18px;
                        text-align   : center;
                    }

                    li.z-crt {
                        color       : #ee0a3b;
                        border-color: #ee0a3b;
                        cursor      : default;
                    }
                }

                .tab_content {
                    margin-top: 64px;

                    .tab_item {
                        display: none;

                        .f-item {
                            padding-bottom: 25px;

                            .u-ipt {
                                color    : #888;
                                font-size: 14px;
                                width    : 100%;
                                height   : 50px;
                                padding  : 10px;
                                border   : 1px solid #e0e0e0;
                            }

                            .col-md-7 {
                                padding     : 0;
                                padding-left: 15px;
                            }

                            .col-md-4 {
                                padding      : 0;
                                float        : right;
                                padding-right: 15px;

                                .u-btn {
                                    padding         : 0;
                                    width           : 100%;
                                    height          : 50px;
                                    line-height     : 50px;
                                    font-weight     : 400;
                                    background-color: #ededed;
                                    border-color    : #ececec;
                                    color           : #888;
                                    cursor          : default;
                                }
                            }
                        }
                    }

                    .tab_item.z-crt {
                        display: block;
                    }
                }

                .f-item.button {
                    padding-bottom: 25px;

                    input {
                        padding         : 0;
                        width           : 100%;
                        height          : 50px;
                        line-height     : 50px;
                        font-weight     : 400;
                        font-size       : 14px;
                        text-align      : center;
                        outline         : 0;
                        background-color: #ededed;
                        color           : #888;
                        cursor          : default;
                    }
                }

                .f-item.f-bottom {
                    text-align: center;

                    a {
                        color          : #888;
                        text-decoration: none;

                        &:hover {
                            color: #ee0a3b;
                        }
                    }
                }

                .f-oauth {
                    position   : absolute;
                    left       : 30px;
                    right      : 30px;
                    bottom     : 30px;
                    padding-top: 20px;
                    border-top : 1px solid #e0e0e0;

                    .title {
                        position        : absolute;
                        background-color: #fff;
                        font-size       : 14px;
                        color           : #888;
                        width           : 112px;
                        height          : 22px;
                        top             : -11px;
                        left            : 124px;
                        text-align      : center;
                    }

                    .items {
                        text-align: center;
                        height    : 34px;

                        i+i {
                            margin-left: 30px;
                        }

                        i {
                            &:first-of-type {
                                &:hover {
                                    color: #0288d1;
                                }
                            }

                            &:nth-of-type(2) {
                                &:hover {
                                    color: #d32f2f;
                                }
                            }

                            &:nth-of-type(3) {
                                &:hover {
                                    color: #00aaee;
                                }
                            }

                            &:nth-of-type(4) {
                                &:hover {
                                    color: #04b205;
                                }
                            }
                        }

                        .iconfont {
                            width    : 29px;
                            height   : 29px;
                            font-size: 29px;
                            color    : #747474;
                        }
                    }
                }
            }
        }
    }

    .login-ad {
        height: 590px;

        a {
            display   : block;
            width     : 100%;
            height    : 100%;
            background: url(../images/login/link_16257939355106.jpg) center no-repeat;
        }
    }
}